<template>
  <div>
    <Menu :menu="menu" :selected="selected" @select="handleMenuSelect"></Menu>
  </div>
</template>

<script>
import Menu from "./components/Menu.vue";

export default {
  components: {
    Menu,
  },
  data() {
    return {
      selected: "",
      menu: [
        {
          id: "item1",
          name: "Item 1",
          children: [
            {
              id: "item1-1",
              name: "Item 1-1",
              children: [
                {
                  id: "item1-1-1",
                  name: "Item 1-1-1",
                  children: [
                    {
                      id: "item1-1-1-1",
                      name: "Item 1-1-1-1",
                      children: [],
                    },
                    {
                      id: "item1-1-1-2",
                      name: "Item 1-1-1-2",
                      children: [],
                    },
                  ],
                },
                {
                  id: "item1-1-2",
                  name: "Item 1-1-2",
                  children: [],
                },
              ],
            },
          ],
        },
        {
          id: "item2",
          name: "Item 2",
          children: [
            {
              id: "item2-1",
              name: "Item 2-1",
              children: [],
            },
            {
              id: "item2-2",
              name: "Item 2-2",
              children: [],
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleMenuSelect(id) {
      this.selected = id;
    },
  },
};
</script>
